<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    svg {
      width: 800px;
      height: 800px;
    }
  </style>
</head>

<body>
  <svg>
    <!-- <line x1="100" y1="100" x2="300" y2="300" stroke="#099"></line> -->
    <!-- <line x1="100" y1="100" x2="200" y2="200" style="stroke:red;"></line> -->
    <!-- 
    <polyline points="100,100 300,100 200,400 300,500" style="fill:none;stroke:red;stroke-width:3" /> -->
    <!-- <rect x="100" y="100" width="300" height="100" style="fill:rgb(205, 116, 0);stroke-width:1"></rect> -->

    <circle cx="100" cy="100" r="50" style="stroke:red;fill:rgb(22, 50, 142)"></circle>

    <ellipse cx="250" cy="100" rx="30" ry="50" style="stroke:green;fill:rgb(135,88,64)"></ellipse>

  </svg>
</body>

</html>